<script setup>
import { Edit, RefreshRight } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()

//控制父页面、子页面的显示
const visiblity = ref(true)

//检测路由是否发生变化，入变化，刷新父页面
const notFistChange = ref(false)
watch(
  route,
  () => {
    console.log("采购订单路由检测到路由发生改变！")
    console.log("此时visiblity的值为:")
    console.log(visiblity.value)
    //如果是由父页跳转到子页面，不执行，否则执行
    if (!visiblity.value && notFistChange.value) {
      visiblity.value = true
      console.log("visiblity.value:")
      console.log(visiblity.value)
      notFistChange.value = false
    } else {
      notFistChange.value = true
    }
  }
)

//跳转采购订单物料入库组件
function toEquimentData() {
  visiblity.value = false
  console.log("设备维修任务列表组件已屏蔽")
  console.log("此时visiblity的值为:")
  console.log(visiblity.value)
  router.push({ name: "填写设备维修信息" })
}

const input = ref('')
const indate1 = ref('')
const indate2 = ref('')
//测试数据
const data = [{
  "id": 1,
  "test1": "2019-04-01 13:23:15",
  "test2": "E1006",
  "test3": "待维修"
}]
</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;" v-if="visiblity">
    <el-row>
      <el-col style="margin-left: 10px;">
        <h4>设备维修任务列表</h4>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" style="margin:10px 0 0 10px">
        <el-button :icon="RefreshRight">
          刷新
        </el-button>
      </el-col>
      <el-col :span="5" style="margin-top:10px">
        <el-date-picker v-model="indate1" type="date" placeholder="维修日期开始" />
      </el-col>
      <el-col :span="5" style="margin-top:10px">
        <el-date-picker v-model="indate2" type="date" placeholder="维修日期结束" />
      </el-col>
      <el-col :span="9" style="margin-top:10px;margin-left: 20px;">
        <el-input v-model="input" placeholder="请输入设备名称" />
      </el-col>
      <el-col :span="2" style="margin-top:10px">
        <el-button type="success">搜索</el-button>
      </el-col>
    </el-row>
    <el-row style="background-color:white;margin:0 10px 0 10px">
      <el-col :span="24" style="margin-top:15px">
        <!--:data为测试数据，可对应数据库修改  stripe斑马纹效果 border带边框 -->
        <el-table :data="data" stripe border style="width:100%">
          <!-- 定义列表属性 prop值可对于数据库字段名修改-->
          <el-table-column label="序号" align="center" prop="id" width="60"></el-table-column>
          <el-table-column label="任务创建时间" align="center" prop="test1" width="320" />
          <el-table-column label="维修设备" align="center" prop="test2" width="170" />
          <el-table-column label="维修状态" align="center" prop="test3" width="140" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-row>

</template>
<style scoped>

</style>